Skip to content

Refactor color handling in node components to use theme-based rotating colors#512

Merged
stijnpotters1 merged 8 commits into
masterfrom
fix/dynamic-flow-colors
Jun 2, 2026
Merged

Refactor color handling in node components to use theme-based rotating colors#512
stijnpotters1 merged 8 commits into
masterfrom
fix/dynamic-flow-colors

Conversation

@stijnpotters1
Copy link
Copy Markdown
Contributor

@stijnpotters1 stijnpotters1 commented May 27, 2026

image

Now all colours in the same way decided as in the frank doc
Now dynamically assigned so Wrapper category colour also fixed

@stijnpotters1 stijnpotters1 self-assigned this May 27, 2026
@stijnpotters1 stijnpotters1 linked an issue May 27, 2026 that may be closed by this pull request
@philipsens
Copy link
Copy Markdown
Member

It looks like a lot is blue, doesn't it?

@Matthbo
Copy link
Copy Markdown
Member

Matthbo commented May 28, 2026

I agree, Batch, Other & Parameters seem to use the same colour which while might be a coincidence doesn't really seem right
Every element category type does need a unique colour in this case since distinction is important.
The rotating hue trick was a fun idea and works nicely for something like FF Reference but here we need more uniqueness as to not confuse component types with each other

Comment thread src/main/frontend/app/utils/flow-utils.ts Outdated
@philipsens
Copy link
Copy Markdown
Member

I agree, Batch, Other & Parameters seem to use the same colour which while might be a coincidence doesn't really seem right Every element category type does need a unique colour in this case since distinction is important. The rotating hue trick was a fun idea and works nicely for something like FF Reference but here we need more uniqueness as to not confuse component types with each other

Hmm, it is definitely something to think about. For the Figma design, I did choose some colors, but I hoped that the pastel hue color method would result in nicer - and more - colors.

We could decide on a middle ground, picking the colors we want ourselves, but generate the color as a fallback for newly added component categories.

@stijnpotters1 stijnpotters1 requested a review from Matthbo May 29, 2026 18:30
Signed-off-by: Stijn Potters <stijn.potters1@gmail.com>
Comment thread src/main/frontend/app/routes/studio/canvas/nodetypes/child-node.tsx Outdated
@sonarqubecloud
Copy link
Copy Markdown

sonarqubecloud Bot commented Jun 2, 2026

@stijnpotters1 stijnpotters1 merged commit 3e47904 into master Jun 2, 2026
5 checks passed
@stijnpotters1 stijnpotters1 deleted the fix/dynamic-flow-colors branch June 2, 2026 11:44
@philipsens philipsens restored the fix/dynamic-flow-colors branch June 2, 2026 13:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Wrappers no border?

4 participants